<template>
	<view class="mykehu p20">
		<myNav>
			<view slot="left" @click="back"><uni-icons type="closeempty" color="#fff"></uni-icons></view>
			<view class="center">房源信息</view>
		</myNav>
		<view class="tab-xxx" >
			测试项目-一期-10栋
			<image @click="sesese" src="../../static/all/fangyuanxinxi/jiantou.png"  mode=""></image>
		</view>
		<view class="bingtu" @click="open"><image src="../../static/all/fangyuanxinxi/bingtu.png" mode=""></image></view>
		<view class="scroll">
			<view class="list" v-for="(item, index) in 4" :key="index">
				<view class="list-left">{{ index }}</view>
				<view class="list-right">
					<view class="card" @click="info(item)" v-for="(item, index) in 5" :key="index">
						<uni-icons type="home-filled" :color="index % 2 == 1 ? '#666666' : '#990000'"></uni-icons>
						<text>180{{ index }}</text>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="sss" style="background-color: #FFFFFF;">
				<canvas
					canvas-id="canvasPie"
					id="canvasPie"
					class="charts"
					:width="cWidth * pixelRatio"
					:height="cHeight * pixelRatio"
					:style="{ width: cWidth + 'px', height: cHeight + 'px' }"
					@touchstart="touchPie"
				></canvas>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { mapMutations } from 'vuex';
import darkCalendar from '@/components/dark-calendar/dark-calendar';
import myNav from '../../components/mynav/mynav.vue';
import { searchedVistor } from '@/api/index.js';
import { MyShow } from '@/util/my.js';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import uCharts from '@/components/u-charts/u-charts.js';
import { isJSON } from '@/common/checker.js';
	var _self;
	var canvaPie=null;
export default {
	components: { myNav, darkCalendar, uniPopup },
	data() {
		return {
			para: '',
			cWidth: '',
			cHeight: '',
			pixelRatio: 1,
			textarea: ''
		};
	},
	onLoad() {
	
	},
	methods: {
		sesese(){
			uni.switchTab({
				url:"./chakanloudong"
			})
		},
		info(val){
			uni.navigateTo({
				url:"./p24?id="+val
			})
		},
		open(){
			this.$refs.popup.open()
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function(res) {
					if (res.pixelRatio > 1) {
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio = 2;
					}
				}
			});
			//#endif
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.getServerData();
		},
		back() {
			uni.switchTab({
				url: '../my/my'
			});
		},
		async searchedVistor() {
			//去请求接口
			//  todo 字段自己填充吧
			// console.log('去请求接口');
			try {
				let reslut = await searchedVistor({
					para: this.para
				});
				//成功
				new MyShow('需要渲染的字段').tixing();
			} catch (e) {
				//TODO handle the exception
				new MyShow('需要渲染的字段').tixing();
			}
		},
		gotoinfo(val) {
			uni.navigateTo({
				url: './p11'
			});
		},
		goto(val) {
			uni.navigateTo({
				url: './p21?id=' + val.id
			});
		},
		getServerData() {
			uni.request({
				url: 'https://www.ucharts.cn/data.json',
				data: {},
				success: function(res) {
					console.log(res.data.data);
					let Pie = { series: [] };
					//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
					Pie.series = res.data.data.Pie.series;
					_self.textarea = JSON.stringify(res.data.data.Pie);
					_self.showPie('canvasPie', Pie);
				},
				fail: () => {
					_self.tips = '网络错误，小程序端请检查合法域名';
				}
			});
		},
		showPie(canvasId, chartData) {
			canvaPie = new uCharts({
				$this: _self,
				canvasId: canvasId,
				type: 'pie',
				fontSize: 11,
				padding: [15, 15, 0, 15],
				legend: {
					show: true,
					padding: 5,
					lineHeight: 11,
					margin: 0
				},
				background: '#FFFFFF',
				pixelRatio: _self.pixelRatio,
				series: chartData.series,
				animation: true,
				width: _self.cWidth * _self.pixelRatio,
				height: _self.cHeight * _self.pixelRatio,
				dataLabel: true,
				extra: {
					pie: {
						border: true,
						borderColor: '#FFFFFF',
						borderWidth: 3
					}
				}
			});
		},
		touchPie(e) {
			canvaPie.showToolTip(e, {
				format: function(item) {
					return item.name + ':' + item.data;
				}
			});
			canvaPie.touchLegend(e, { animation: true });
		},
		changeData() {
			if (isJSON(_self.textarea)) {
				let newdata = JSON.parse(_self.textarea);
				canvaPie.updateData({
					series: newdata.series,
					categories: newdata.categories
				});
			} else {
				uni.showToast({
					title: '数据格式错误',
					image: '../../../static/images/alert-warning.png'
				});
			}
		}
	}
};
</script>

<style lang="scss">
@import './main.scss';
.myright {
	display: flex;
	flex-direction: column;
	image {
		width: 20px;
		height: 20px;
	}
	margin-top: 40px;
	align-items: center;
	color: #ffffff;
	text {
		margin-top: 5px;
	}
}
</style>
